<template>
  <div id="mp_goods_list">
    <commonHeader></commonHeader>
    <!--数据列表-->
    <div class="mui-content" style="padding-top: 44px;">
      <div class="mingpin2_top_panel">
        <div class="mingpin2_top_panel_img">
          <img :src="$store.state.common.mp_shop_info.pic"/>
        </div>
        <div class="mingpin_top2_panel_info">
          <div class="mingpin_top2_panel_title">{{$store.state.common.mp_shop_info.name}}</div>
          <div :class="open_des_class2">{{$store.state.common.mp_shop_info.desc}}</div>
        </div>
        <div class="mingpin_top_open" @tap="open_des">
          <i :class="open_des_class"></i>
          <span v-html="open_des_text">展开</span>
        </div>
      </div>
      <div class="goods_list">
        <div class="item" v-for="(i,k) in goods_list" @tap="open_goods_detail(i.goodsid)" :key="k">
          <img :src="i.pic">
          <div class="title"><span class="spcile_price">
								<!-- <span>今日特价</span> -->
								</span> {{i.name}}
          </div>
          <div class="price">
            <span>￥{{i.min_price}}元</span>
            <!--<i><img src="../images/ptsp/car_03.png" alt=""></i>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/Header";
  import goods_ajax from "../../ajax/goods_ajax"
  import util from "../../tools/util";

  export default {
    name: "MpGoodsList",
    created() {
      this.$store.commit("change_header", {
        header_text: "名品商家",
        header_right_func: false,
        header_right_html: "<span></span>",
        header_back_btn: true
      });

      // 获取数据
      let sid = util.query_url("sid")
      goods_ajax.get_mp_goods_list({
        bid: this.$store.state.account.community.sqid,
        sid: sid
      }, res => {
        console.log(res)
        this.goods_list = res
      })
    },

    components: {
      commonHeader
    },
    data() {
      return {
        shop: '',
        goods_list: '',
        has_more_data: true,
        sq_info: '',
        is_open_des: false,
        open_des_text: '展开',
        open_des_class: 'mui-icon mui-icon-arrowdown',
        open_des_height: '',
        open_des_class2: 'mingpin_top2_panel_des show_3_line'
      }
    },
    methods: {

      to_detail: function (goods_id) {

      },
      open_goods_detail(goodsid){
        this.$router.push("/shop/goods_list/goods?goodsid="+goodsid)
      },
      open_des() {
        console.log(123)
        if (!this.is_open_des) {
          this.open_des_text = '收起';
          this.open_des_class = 'mui-icon mui-icon-arrowup'
          this.is_open_des = !this.is_open_des;
          this.open_des_class2 = 'mingpin_top2_panel_des'


        } else {
          this.open_des_text = '展开';
          this.open_des_class = 'mui-icon mui-icon-arrowdown'
          this.is_open_des = !this.is_open_des;
          this.open_des_class2 = 'mingpin_top2_panel_des show_3_line'

        }
      },
    },


    mounted() {

    }
  }
</script>

<style scoped>

  body,
  html,
  .mui-content {
    font-family: "微软雅黑";
    background-color: #FFFFFF;
    padding-bottom: 6.4rem;
    padding-top: 0.5973rem;
  }

  .mui-bar {
    border-bottom: 1px solid #c5c5c5;
  }

  .mui-action-back {
    height: 44px;
    width: 44px;
  }

  .mui-action-back img {
    width: 100%;
  }

  .mui-title {
    height: 44px;
  }

  .fr {
    float: right;
  }

  .fl {
    float: left;
  }

  .mui-bar {
    top: 0.8533rem;
    font-size: 0.7253rem;
  }

  .hr_20 {
    height: 0.4267rem;
    background-color: #f6f6f6;
  }

  .ptsp_top_stats {
    height: 0.9387rem;
    width: 100%;
    z-index: 20;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
  }

  .mui-title span {
    margin-left: 0.8533rem;
    display: inline-block;
    height: 44px;
    color: #888888;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
  }

  .mui-title span.ptsp_active {
    color: #1c83fc;
    border-bottom: 3px solid #1c83fc;
  }

  .goods_list {
    padding: 0.384rem;
    overflow: hidden;
  }

  .goods_list .item {
    width: 7.424rem;
    height: 11.6053rem;
    box-sizing: border-box;
    box-shadow: 0 0 5px #aaa;
    float: left;
  }

  .goods_list .item img {
    width: 100%;
    height: 7.4667rem;
  }

  .goods_list .item .title {
    padding: 0.4267rem;
    padding-bottom: 0;
    line-height: 0.927rem;
    font-size: 0.512rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .goods_list .item .title .spcile_price {
    width: 2.0693rem;
    height: 0.768rem;
    background: linear-gradient(to right, #ff6b23, #ff1610);
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 0.4693rem;
  }

  .goods_list .item .title .spcile_price span {
    transform: scale(0.75);
    display: inline-block;
  }

  .goods_list .item .price {
    padding: 0.4267rem;
  }

  .goods_list .item .price span {
    font-size: 0.5547rem;
    color: #1c83fc;
  }

  .goods_list .item .price i {
    display: inline-block;
    width: 1.3653rem;
    height: 1.3653rem;
    float: right;
  }

  .goods_list .item .price i img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }

  .goods_list .item:nth-child(odd) {
    margin-right: 0.384rem;
    margin-bottom: 0.384rem;
  }

  .mingpin_top_panel {
    height: 6.4rem;
    overflow: hidden;
    background-color: #ccc;
    position: relative;
    top: 0;
    left: 0;
  }

  .mingpin_top_panel .mingpin_top_panel_img {
    position: absolute;
    top: 1.4933rem;
    left: 0.64rem;
    width: 3.4133rem;
    height: 3.4133rem;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
  }

  .mingpin_top_panel .mingpin_top_panel_img img {
    width: 100%;
    height: 100%;
  }

  .mingpin_top_panel .mingpin_top_panel_info {
    position: absolute;
    left: 4.48rem;
    width: 10.88rem;
    top: 1.7067rem;
  }

  .mingpin_top_panel .mingpin_top_panel_info .mingpin_top_panel_des {
    font-size: 0.5547rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #727272;
  }

  .mingpin_top_panel .mingpin_top_panel_info p {
    padding: 0;
    margin: 0;
  }

  html,
  body {
    padding: 0;
    margin: 0;
  }

  .mingpin2_top_panel {
    padding: 0.6rem;
    /* background-color: #aaa; */
    overflow: hidden;
    background-color: #F1F1F1;
  }

  .mingpin2_top_panel_img {
    float: left;
    width: 3.4rem;
    height: 3.4rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: #fff;

  }

  .mingpin2_top_panel_img img {
    width: 100%;
    height: 100%;
  }

  .mingpin_top2_panel_info {
    float: left;
    /* background-color: #ccc; */
    width: 10rem;
    margin-left: 0.6rem;
  }

  .mingpin_top2_panel_title {

  }

  .mingpin_top2_panel_des {
    font-size: 0.5rem;

    overflow: hidden;
  }

  .show_3_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .mingpin_top_open {
    height: 1.2rem;
    /* background-color: #ccc; */
    float: left;
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.4rem;
    color: #AAAAAA;
  }
</style>
